<!--
 * @Description: 
 * @Author: xuzp4
 * @Date: 2023-01-04 13:46:46
 * @LastEditors: xuzp4
 * @LastEditTime: 2023-01-06 16:57:44
 * @FilePath: \vue_demo\src\view\threejs\3dtext.vue
-->
<template>
  <canvas class="webgl"></canvas>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";
import typefaceFont from "three/examples/fonts/helvetiker_regular.typeface.json";
import { FontLoader } from "three/examples/jsm/loaders/fontLoader";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";
export default {
  mounted() {
    // debug
    const gui = new dat.GUI();
    // canvas
    const canvas = document.querySelector(".webgl");
    // Scene
    const scene = new THREE.Scene();
    // Axes helper
    const axesHelper = new THREE.AxesHelper();
    scene.add(axesHelper);
    // Texture
    const textureLoader = new THREE.TextureLoader();
    const matcapTexture = textureLoader.load("/static/textures/matcaps/1.png");
    // fonts
    const fontLoader = new FontLoader();
    fontLoader.load(
      "/static/fonts/helvetiker_regular.typeface.json",
      (font) => {
        console.log("font loaded");
        const textGeometry = new TextGeometry("Hello Three.js", {
          font,
          size: 0.5,
          height: 0.2,
          curveSegments: 5,
          bevelEnabled: true,
          bevelThickness: 0.03,
          bevelSize: 0.02,
          bevelOffset: 0,
          beevelSegments: 4,
        });
        // textGeometry.computeBoundingBox()
        // textGeometry.translate(-textGeometry.boundingBox.max.x*0.5,-textGeometry.boundingBox.max.y*0.5,-textGeometry.boundingBox.max.z*0.5)
        textGeometry.center();
        const material = new THREE.MeshMatcapMaterial({matcap:matcapTexture})
        // const textMaterial = new THREE.MeshBasicMaterial({wireframe:true})
        const text = new THREE.Mesh(textGeometry, material);
        scene.add(text);
        const donutGeometry = new THREE.TorusBufferGeometry(0.3, 0.1, 20, 45);
        for (let i = 0; i < 1000; i++) {
          const donut = new THREE.Mesh(donutGeometry, material);
          donut.position.x = (Math.random() - 0.5) * 10;
          donut.position.y = (Math.random() - 0.5) * 10;
          donut.position.z = (Math.random() - 0.5) * 10;
          donut.rotation.x = Math.random() * Math.PI;
          donut.rotation.y = Math.random() * Math.PI;
          const scale = Math.random();
          donut.scale.set(scale, scale, scale);
          scene.add(donut);
        }
      },
      null,
      (err) => {
        console.error(err, "error");
      }
    );
    // cube
    const sizes = {
      width: 800,
      height: 600,
    };
    // Camera
    const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
    camera.position.z = 3;
    // camera.lookAt(cube.position);
    scene.add(camera);
    const controls = new OrbitControls(camera, canvas);
    controls.enableDamping = true;
    const renderer = new THREE.WebGLRenderer({
      canvas,
    });
    renderer.setSize(sizes.width, sizes.height);
    renderer.render(scene, camera);
    // animation
    const tick = () => {
      controls.update();
      renderer.render(scene, camera);
      window.requestAnimationFrame(tick);
    };
    tick();
  },
};
</script>

<style>
</style>